<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<style type="text/css">
    body {
        background: #ccc;
    }

    label {
        width: 80px;
        display: inline-block;
    }

    .container {
        width: 450px;
        height: 400px;
        padding: 50px;
        line-height: 40px;
        border: 1px solid #999;
        background: #efefef;
        position: absolute;
        left: 300px;
        top:100px;
    }
    .container .topBox{
        width: 100%;
        height: 40px;
        background: rgb(241, 188, 74);
        position: absolute;
        left: 0px;
        top: 0px;
    }
    .topBox #txt{
        width: 540px;
        font-size: 18px;
        font-weight: bold;
        color: #000;
        line-height: 30px;
        position: absolute;
        left: -40px;
        top: 3px;
    }
    .topBox #btn{
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 40px;
        border: none;
        background: #586cdd;
    }
    span {
        margin-left: 30px;
        font-size: 12px;
        padding:2px 20px 0;
        color: #ccc;
    }
    #check{
        position: relative;
    }
    #inp8{
        width: 50px;
    }
    #checkImg{
        width: 60px;
        height: 20px;
        position: absolute;
        left: 145px;
        top: 12px;
        border: 1px solid #000;
        text-align: center;
        line-height: 20px;
    }
    #checkTxt{
        position: absolute;
        left: 165px;
        top: 0px;
    }
    #checkTxt a{
        width: 100%;
    }
    #btn2{
        background: rgb(126, 165, 223);
        position: absolute;
        bottom: 70px;
        left: 130px;
    }
    .wrong {

        color: red;
        background: url(images/error.png) no-repeat;
        
    }

    .right {
        color: green;
        background: url(images/right.png) no-repeat;
    }

    .pwd {
        width: 220px;
        height: 20px;
        background: url("images/strong.jpg") no-repeat;
        display: none;
    }
    .str1{
        background-position: 0 -20px;
    }
    .str2{
        background-position: 0 -40px;
    }
    .str3{
        background-position: 0 -60px;
    }
    .str4{
        background-position: 0 -80px;
    }
</style>
<script src="./js/json.p.js"></script>
<script src="./js/tools.js"></script>
<body>
<div class="container">
    <div class="topBox">
        <span id="txt">我的ui框架</span>
        <button id="btn">x</button>
    </div>
    <label>账&nbsp&nbsp&nbsp号</label><input type="text" id="inp1"><span>请输入您的账号</span><br>
    <label>密&nbsp&nbsp&nbsp码</label><input type="text" id="inp2"><span>请输入您的密码</span><br>
    <label>确认密码</label><input type="text" id="inp3"><span>请再次输入您的密码</span><br>
    <label>Q&nbsp&nbsp&nbspQ</label><input type="text" id="inp4"><span>输入正确的QQ号码</span><br>
    <label>手&nbsp&nbsp&nbsp机</label><input type="text" id="inp5"><span>输入13位手机号码</span><br>
    <label>邮&nbsp&nbsp&nbsp箱</label><input type="text" id="inp6"><span>输入正确邮箱</span><br>
    <label>座&nbsp&nbsp&nbsp机</label><input type="text" id="inp7"><span>输入您的座机</span><br>
    <div id="check">
        <label>验&nbsp证&nbsp码</label><input type="text" id="inp8">
        <div id="checkImg"><a href=""></a></div>
        <span id="checkTxt">点击验证码生成新验证码</span><br>
    </div>
    <div id="password" class="pwd"></div>
    <button id="btn2">注册</button>
</div>


<script>
    var oCon=document.querySelector(".container");
    var oTop=document.querySelector("#txt")

    oTop.onmousedown=function(evt){
        var e=evt||window.event;
        var disX=e.pageX-oCon.offsetLeft;
        var disY=e.pageY-oCon.offsetTop;
        document.onmousemove=function(evt){
            var e=evt||window.event;
            oCon.style.left=e.pageX-disX+"px";
            oCon.style.top=e.pageY-disY+"px";
        }
        document.onmouseup=function(){
            document.onmousemove=document.onmouseup=null;
        }
    }

    var oBtn=document.querySelector("#btn");

    oBtn.onclick=function(){
        oCon.style.display="none";
    }

    var str1="";
    var str2="";
    for(i=48;i<=57;i++){
        num1=String.fromCharCode(i.toString());
        str1+=num1;
    }
    for(i=65;i<=90;i++){
        num2=String.fromCharCode(i.toString());
        str2+=num2;
    }
    var str3=str1+str2;
            
    function randomCode(n){
        var str="";
        for(a=0;a<n;a++){
            var num3=parseInt(Math.random()*(35));
            str+=str3[num3];
        }
        return str;
    }

    var oCheckImg=document.querySelector("#checkImg");
    oCheckImg.innerHTML=randomCode(5);
    oCheckImg.style.backgroundColor=tools.getColor();
    oCheckImg.onclick=function(){
        oCheckImg.innerHTML=randomCode(5);
        oCheckImg.style.background=tools.getColor();
    }

    var oInputs=document.querySelectorAll("input");
    oInputs[0].oninput=function(){
        var reg1=/^[a-z]\w{3,13}[0-9]$/i;
        if(!(reg1.test(oInputs[0].value))){
            oInputs[0].nextElementSibling.className="wrong";
        }else{
            oInputs[0].nextElementSibling.className="right";
            oInputs[0].nextElementSibling.innerHTML="用户名正确";
        }
    }
    oInputs[1].oninput=function(){
        var reg2=/^\w{6,18}$/;
        if(!(reg2.test(oInputs[1].value))){
            oInputs[1].nextElementSibling.className="wrong";
        }else{
            oInputs[1].nextElementSibling.className="right";
            oInputs[1].nextElementSibling.innerHTML="密码正确";
        }
    }
    oInputs[2].oninput=function(){
        let value1=oInputs[1].value;
        if(value1!=oInputs[2].value){
            oInputs[2].nextElementSibling.className="wrong";
            oInputs[2].nextElementSibling.innerHTML="密码错误";
        }else{
            oInputs[2].nextElementSibling.className="right";
            oInputs[2].nextElementSibling.innerHTML="密码正确";
        }
    }
    oInputs[3].oninput=function(){
        var reg3=/^\d{5,13}$/;
        if(!(reg3.test(oInputs[3].value))){
            oInputs[3].nextElementSibling.className="wrong";
        }else{
            oInputs[3].nextElementSibling.className="right";
            oInputs[3].nextElementSibling.innerHTML="QQ号正确";
        }
    }
    oInputs[4].oninput=function(){
        var reg4=/^[1][3-9]\d{9}$/;
        if(!(reg4.test(oInputs[4].value))){
            oInputs[4].nextElementSibling.className="wrong";
        }else{
            oInputs[4].nextElementSibling.className="right";
            oInputs[4].nextElementSibling.innerHTML="手机号正确";
        }
    }
    oInputs[5].oninput=function(){
        var reg5=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
        if(!(reg5.test(oInputs[5].value))){
            oInputs[5].nextElementSibling.className="wrong";
        }else{
            oInputs[5].nextElementSibling.className="right";
            oInputs[5].nextElementSibling.innerHTML="邮箱正确";
        }
    }
    oInputs[6].oninput=function(){
        var reg6=/^[0-9]+$/;
        if(!(reg6.test(oInputs[6].value))){
            oInputs[6].nextElementSibling.className="wrong";
        }else{
            oInputs[6].nextElementSibling.className="right";
            oInputs[6].nextElementSibling.innerHTML="座机正确";
        }
    }

    var oMsg=document.querySelector("#check input");
    var oCheckTxt=document.querySelector("#check span");
    var isFlag=false;
    oMsg.oninput=function(){
        if(oMsg.value==oCheckImg.innerHTML){
            oCheckTxt.className="right";
            oCheckTxt.innerHTML="验证码正确";
        }else{
            oCheckTxt.className="wrong";
            oCheckTxt.innerHTML="验证码错误";
        }
    }
    var oBtn2=document.querySelector("#btn2");
    
    oBtn2.onclick=function(){
        for(var i=0;i<oInputs.length-1;i++){
            if(!(oInputs[i].nextElementSibling.className=="right"&&oCheckTxt.className=="right")){
                isFlag=false;
            }else{
                isFlag=true;
            }
        }
        if(isFlag){
            var test={
                uname:oInputs[0].value,
                upwd:oInputs[1].value,
                uqq:oInputs[3].value,
                uphone:oInputs[4].value,
                uemail:oInputs[5].value,
                utel:oInputs[6].value
            }
            var oCur=JSON.parse(localStorage.getItem("user")||'[]');
            var strFlag=false;
            // console.log(oCur);
            // console.log(typeof(oCur));
            for(var i=0;i<oCur.length;i++){
                if(oCur[i].uname==test.uname){
                    strFlag=true;
                    break;
                }
            }
            if(strFlag){
                alert("该用户已经注册！")
            }else{
                oCur.push(test);
                localStorage.setItem("user",JSON.stringify(oCur));
                alert("注册成功！")
                location="login.html";
            }
        }else{
            alert("注册失败！");
        }
        return false;
    }
</script>
</body>
</html>